@use 'sass:math';
@use '../../styles/colors';
@use '../../styles/helpers';
@use '../../styles/variables';

$button-border-width: variables.$default-border;
$button-border-radius: variables.$default-border-radius;
$button-padding: (0.75 * variables.$default-gap - variables.$default-border) (1.5 * variables.$default-gap - variables.$default-border);
$button-small-padding: (0.25 * variables.$default-gap - math.div(variables.$default-border, 2)) (1.5 * variables.$default-gap - variables.$default-border);

$button-active-displacement: 2px;

$button-color: colors.$color-text-lighter;
$button-background-color: colors.$color-blue;
$button-danger-background-color: colors.$color-dark-red;
$button-secondary-background-color: colors.$color-text-grey;

$button-font-family: variables.$font-family;
$button-font-size: 0.875rem;
$button-font-weight: 500;
$button-line-height: 1.25rem;

$button-disabled-opacity: variables.$disabled-opacity;

$button-loading-border-width: (2 * variables.$default-border);
$button-loading-gap: math.div(variables.$default-gap, 2);
$button-loading-size: $button-line-height;
$button-loading-color: #ffffff;

$button-badge-size: 1.5rem;
$button-badge-background-color: colors.$color-red;
$button-badge-color: colors.$color-text-lighter;
$button-badge-font-family: variables.$font-family;
$button-badge-font-size: 0.8125rem;
$button-badge-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

$button-icon-size: 54px;
$button-icon-border-radius: 4px;
$button-icon-padding: 10px;

.button {
	@mixin state($color, $alpha-color: rgba($color, 0.5)) {
		border-color: $color;
		background: $color;

		&.button--outline,
		&.button--nude {
			color: $color;

			&.button--loading::after {
				border-color: $color $alpha-color $alpha-color $alpha-color;
			}
		}
	}

	position: relative;

	display: flex;
	flex-direction: row;

	box-sizing: border-box;
	padding: $button-padding;

	cursor: pointer;
	user-select: none;
	transition:
		color variables.$default-time-animation,
		background-color variables.$default-time-animation,
		border-color variables.$default-time-animation,
		transform math.div(variables.$default-time-animation, 2);
	white-space: nowrap;
	text-decoration: none;

	color: var(--font-color, $button-color);
	border: $button-border-width solid;
	border-radius: $button-border-radius;

	font-family: $button-font-family;
	font-size: $button-font-size;
	font-weight: $button-font-weight;
	line-height: $button-line-height;
	justify-content: center;

	@include state(var(--color, $button-background-color), transparent);
	@include helpers.pressable-button($button-active-displacement, $button-border-width);

	&:focus {
		box-shadow: 0 0 5px rgba(#000000, 0.5);
	}

	&--danger {
		color: $button-color;

		@include state($button-danger-background-color);
	}

	&--secondary {
		color: $button-color;

		@include state($button-secondary-background-color);
	}

	&--outline {
		background: none;
	}

	&--nude {
		border-color: transparent;
		background: none;

		&:focus {
			box-shadow: none;
		}
	}

	&--img {
		border: 0;
		background-position: center;
		background-size: cover;
		box-shadow: 0 0 5px rgba(#000000, 0.5) !important;

		&:focus {
			box-shadow: none;
		}
	}

	&--stack {
		width: 100%;
	}

	&--small {
		padding: $button-small-padding;
	}

	&--full {
		width: 100%;
	}

	&--disabled {
		cursor: not-allowed;

		opacity: $button-disabled-opacity;
	}

	&--loading {
		&::after {
			position: relative;
			left: $button-loading-gap;

			display: inline-flex;

			box-sizing: border-box;
			width: $button-line-height;
			height: $button-line-height;

			content: "";
			animation: button-loading-rotation 1s linear infinite;

			border: $button-loading-border-width solid;

			border-color: var(--font-color, $button-loading-color) transparent transparent transparent;
			border-radius: 50%;
		}

		&.button--danger::after,
		&.button--secondary::after {
			border-color:
				$button-loading-color
				rgba($button-loading-color, 0.5)
				rgba($button-loading-color, 0.5)
				rgba($button-loading-color, 0.5);
		}
	}

	&--icon {
		width: $button-icon-size;
		height: $button-icon-size;
		padding: $button-icon-padding;

		border-radius: $button-icon-border-radius;
	}

	&__badge {
		position: absolute;
		top: math.div(-$button-badge-size, 3);
		right: math.div(-$button-badge-size, 3);

		min-width: $button-badge-size;
		height: $button-badge-size;
		padding: 0 math.div($button-badge-font-size, 2);

		text-align: center;
		letter-spacing: 0;

		color: $button-badge-color;
		border-radius: math.div($button-badge-size, 2);

		background-color: $button-badge-background-color;
		box-shadow: $button-badge-shadow;

		font-family: $button-badge-font-family;
		font-size: $button-badge-font-size;
		font-weight: bold;
		line-height: $button-badge-size;
	}

	svg {
		flex: 1;
	}
}

@keyframes button-loading-rotation {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}
